<template>
  <div>
    <div class="main_spac1" v-loading="loading">
      <!-- 日期选择 -->
      <div class="search_top">
        <div class="time_change">
          <div class="search_left">
            <change-date @getdate="getdate" ref="time_change_ref"></change-date>
          </div>
          <!-- <div class="search_right">
            <div class="more" @click="more">
              <span>更多</span>
              <i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
            </div>
          </div> -->
        </div>
        <el-collapse-transition>
          <div class="search_more" v-if="moredata">
            <el-form
              :inline="true"
              :model="form"
              class="demo-form-inline"
              ref="userListFrom"
              label-width="50px"
            >
              <el-form-item label="名称" prop="goods_spu_id">
                <change-goods-input
                  ref="changeGoodsInput"
                  @clear="
                    () => {
                      this.form.goods_spu_id = '';
                    }
                  "
                  @sendValue="
                    (data) => {
                      this.form.goods_spu_id = data.id;
                    }
                  "
                ></change-goods-input>
              </el-form-item>
              <el-form-item label="分类" prop="category_id" class="wid220">
                <el-cascader
                  v-model="form.category_id"
                  :options="options"
                  :props="defaultProps"
                  ref="cascaderHandle"
                ></el-cascader>
              </el-form-item>
              <el-form-item>
                <el-button class="reset marginLeft10" @click="reset"
                  >重置</el-button
                >
                <el-button type="primary" :loading="loading" @click="search"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-transition>
      </div>

      <!-- 顶部报表 -->
      <div class="top">
        <div class="box">
          <div class="top-content">
            <div class="top-item">
              <p>{{ loss_data.ullage_purchase | twodecimals }}</p>
              <p>采购损耗金额</p>
            </div>
            <div class="top-item">
              <p>{{ loss_data.ullage_inventory | twodecimals }}</p>
              <p>盘点损耗金额</p>
            </div>
            <!-- <div class="top-item">
              <p>{{ loss_data.ullage_adjust | twodecimals }}</p>
              <p >
                调整损耗金额
              </p>
            </div> -->
            <div class="top-item">
              <p>{{ loss_data.ullage_return | twodecimals }}</p>
              <p>退货损耗金额</p>
            </div>
            <div class="top-item">
              <p>
                {{ loss_data.ullage_all | twodecimals }}
              </p>
              <p>总损耗金额</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间 -->
      <div class="main">
        <div class="left">
          <div class="common_title">
            <p>损耗曲线</p>
            <div class="titlechange">
              <el-select
                v-model.trim="bussiness"
                size="mini"
                class="wid80"
                @change="(val) => typechange(val)"
              >
                <el-option
                  v-for="(item, index) in bussiness_list"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div
            id="chartColumn1"
            style="width: 100%; height: 500px; margin-top: 25px"
          >
            <echart-line
              idname="sales_line"
              :datalist="chart_loss_line"
            ></echart-line>
          </div>
        </div>

        <div class="right">
          <div class="right_item">
            <div class="common_title">
              <p>各分类占比</p>
            </div>
            <div style="width: 100%; height: 220px">
              <echart-pie
                idname="chartColumn_bottom3"
                :datalist="chart_category_rate"
              ></echart-pie>
            </div>
          </div>
          <div class="right_item">
            <div class="common_title">
              <p>各类型占比</p>
            </div>
            <div style="width: 100%; height: 220px">
              <echart-pie
                idname="chartColumn_bottom4"
                :datalist="chart_loss_rate"
              ></echart-pie>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import changeDate from "./lossReport/changeDate.vue";
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
import EchartLine from "./components/echartLine.vue";
import EchartBarsimple from "./components/echartBarsimple.vue";
import EchartPie from "./components/echartPie.vue";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { get_loss_chart } from "@/api/report/index";
import { recursion, category } from "@/utils/index";
export default {
  components: { changeDate, EchartLine, EchartBarsimple, EchartPie },
  data() {
    return {
      loading: false,
      moredata: false,
      // 请求次数
      times: 1,
      // 搜索
      form: {
        category_id: "",
        goods_spu_id: "",
      },
      // 分类
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true,
      },
      options: [],
      //损耗曲线
      bussiness_list: [
        {
          id: 1,
          name: "总损耗",
        },
        {
          id: 2,
          name: "采购损耗",
        },
        {
          id: 3,
          name: "盘点损耗",
        },
        // {
        //   id: 4,
        //   name: "调整损耗",
        // },
        {
          id: 5,
          name: "退货损耗",
        },
      ],
      bussiness: 1,
      //日期
      date: "",

      /* 损耗报表 */
      loss_data: {
        categoryList: [],
        ullage_adjust: 0,
        ullage_all: 0,
        ullage_inventory: 0,
        ullage_purchase: 0,
        category: {},
        ullage_data: {},
        ullage_data_adjust: {},
        ullage_data_inventory: {},
        ullage_data_purchase: {},
        ullage_data_return: {},
        ullage_rate: {},
      },
      chart_loss_line: {
        title: [], //标题集合
        data: [], //数据
        series: {
          name: "损耗金额",
        },
      },
      chart_category_rate: {
        data: [], //{ame:'',value:''}
        series: {
          name: "分类",
        },
      },
      chart_loss_rate: {
        data: [], //{ame:'',value:''}
        series: {
          name: "损耗",
        },
      },
    };
  },
  watch: {
    date() {
      // this.loading = true;
      this.times += 1;
      if (this.times != 2) {
        this.get_loss_chart();
      }
    },
  },
  filters: {
    twodecimals: function (val) {
      if (!val) {
        return val;
      }
      let num = 0;
      let decimals = 2;
      num = Number(`${Math.round(`${val}e${decimals}`)}e-${decimals}`).toFixed(
        2
      );

      return num;
    },
  },
  methods: {
    more() {
      this.moredata = !this.moredata;
    },
    get_loss_chart() {
      this.loading = true;
      this.date = this.$refs["time_change_ref"].$data.date;
      let form = this.list_form();
      let params = {
        start_time: this.date[0],
        end_time: this.date[1],
        // category_id: form.category_id,
        // goods_spu_id: form.goods_spu_id,
        // pid: form.pid,
      };
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        params
      );
      get_loss_chart(data).then((res) => {
        if (res.errcode == 0) {
          this.loading = false;
          let response = res.data;
          this.loss_data = res.data;
          // 分类
          // this.options = recursion(res.data.categoryList, true);
          // 重置 防止叠加
          this.chart_loss_line.title = [];
          this.chart_loss_line.data = [];
          this.chart_category_rate.data = [];
          this.chart_loss_rate.data = [];
          // 损耗路线
          for (let key in response.ullage_data) {
            this.chart_loss_line.title.push(response.ullage_data[key].date);
            this.chart_loss_line.data.push(response.ullage_data[key].money);
          }

          // 分类占比
          for (let key in response.category) {
            var obj = {
              name: response.category[key].title,
              value: response.category[key].money,
              money: response.category[key].money,
            };
            this.chart_category_rate.data.push(obj);
          }
          // 损耗占比
          for (let key in response.ullage_rate) {
            var obj = {
              name: response.ullage_rate[key].name,
              value: response.ullage_rate[key].rate,
            };
            this.chart_loss_rate.data.push(obj);
          }
        } else {
          this.$message.error("请求失败");
        }
      });
    },

    // 获取时间
    getdate(val) {
      this.date = val;
      this.get_loss_chart();
    },
    // 下拉选择
    typechange(val) {
      this.chart_loss_line.title = [];
      this.chart_loss_line.data = [];
      let response = this.loss_data;
      switch (val) {
        case 1:
          for (let key in response.ullage_data) {
            this.chart_loss_line.title.push(response.ullage_data[key].date);
            this.chart_loss_line.data.push(response.ullage_data[key].money);
          }
          break;
        case 2:
          for (let key in response.ullage_data_purchase) {
            this.chart_loss_line.title.push(
              response.ullage_data_purchase[key].date
            );
            this.chart_loss_line.data.push(
              response.ullage_data_purchase[key].money
            );
          }
          break;
        case 3:
          for (let key in response.ullage_data_inventory) {
            this.chart_loss_line.title.push(
              response.ullage_data_inventory[key].date
            );
            this.chart_loss_line.data.push(
              response.ullage_data_inventory[key].money
            );
          }
          break;
        case 4:
          for (let key in response.ullage_data_adjust) {
            this.chart_loss_line.title.push(
              response.ullage_data_adjust[key].date
            );
            this.chart_loss_line.data.push(
              response.ullage_data_adjust[key].money
            );
          }
          break;
        case 5:
          for (let key in response.ullage_data_return) {
            this.chart_loss_line.title.push(
              response.ullage_data_return[key].date
            );
            this.chart_loss_line.data.push(
              response.ullage_data_return[key].money
            );
          }
          break;
      }
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);
      return form;
    },
    search() {
      this.get_loss_chart();
    },
    reset() {
      this.$refs["changeGoodsInput"].name = "";
      this.$refs["userListFrom"].resetFields();
      this.get_loss_chart();
    },
    // 订单路由跳转
    jump_page(type) {
      let route_name = "";
      switch (type) {
        case 1:
          route_name = "loss_report_purchase";
          break;
        case 2:
          route_name = "loss_report_inventory";
          break;
        case 3:
          route_name = "loss_report_adjustment";
          break;
        case 4:
          route_name = "loss_report_return";
          break;
        case 5:
          route_name = "loss_report_all";
          break;
      }
      this.$router.push({
        name: route_name,
        params: {
          date: this.date,
        },
      });
    },
  },
  created() {},
  mounted() {
    this.get_loss_chart();
  },
};
</script> 

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.search_top {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #d6d6d6;
}
.time_change {
  width: 100%;
  height: 66px;

  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

.search_right {
  display: flex;
  align-items: center;
  /deep/ .el-form-item {
    margin-bottom: 0;
  }
}
.top {
  height: 142px;
  width: 100%;
  background-color: #fff;
  padding: 14px 15px;
  .box {
    padding: 15px 0;
    width: 100%;
    height: 100%;
    border: 1px solid #cbcbcb;
  }
  .top-content {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  .top-item {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #cbcbcb;
    &:last-child {
      border-right: 0;
    }
    p {
      &:first-child {
        color: $green;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 6px;
        letter-spacing: 2px;
      }
      &:last-child {
        color: #8e8e8e;
        font-size: 14px;
        margin-top: 6px;
        cursor: pointer;
      }
    }
  }
}
.main {
  width: 100%;
  height: 624px;
  display: flex;
  flex-direction: row;
  margin-top: 15px;
  .left {
    flex: 17;
    background-color: #fff;
    margin-right: 7px;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    .left_item {
      flex: 1;
      padding: 20px 0 10px 0;
      &:first-child {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }
      .title {
        text-align: center;
        color: #000000;
        font-size: 16px;
        padding-bottom: 15px;
      }
      .left_item_content {
        display: flex;
        flex-direction: row;
        div {
          flex: 1;
          margin: 0 10px;
          background-color: #f7f9fa;
          height: 94px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          &:hover {
            cursor: pointer;
            box-shadow: 0px 2px 9px 1px rgba(10, 2, 4, 0.29);
          }
          p {
            &:first-child {
              color: #8e8e8e;
              font-size: 16px;
              padding-bottom: 5px;
              padding-left: 5px;
              letter-spacing: 2px;
            }
            &:last-child {
              color: #191919;
              font-size: 23px;
              padding-top: 5px;
            }
          }
        }
      }
    }
  }
  .right {
    flex: 10;

    margin-left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .right_item {
      height: 305px !important;
      box-sizing: border-box;
      background-color: #fff;
    }
  }
}

.common_title {
  padding: 20px 20px 15px 20px;
  position: relative;
  p {
    color: #8e8e8e;
    font-size: 16px;
    text-align: left;
  }
  .titlechange {
    position: absolute;
    top: 15px;
    right: 20px;
    /deep/.el-input__inner {
      border: none;
    }
    /deep/.wid80 .el-input__inner {
      width: 94px;
    }
  }
}

.more {
  color: $colour_18;
  font-size: $font_14;

  margin-left: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  i {
    font-size: 16px;
    font-weight: bold;
    margin-left: 5px;
    vertical-align: -1px;

    &.on {
      transform: rotate(180deg);
    }
  }

  &:hover {
    cursor: pointer;
  }
}
</style>
